<?xml version="1.0" encoding="utf8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>JyRC Client</title>
		<script type="text/javascript" src="JSJyRCClient.js"></script>

		<script type="text/javascript"><!--
			var client = new JSJyRCClient();
			var topicer = null, texter = null, lister =  null; // i cannot initialize them now

			client.notifyTopicChange = function(newtopic) {
				if(!topicer)
					topicer = document.getElementById("topicer");
				if(topicer)
					topicer.innerHTML = newtopic;
			}

			client.notify = function(msg,auth,d) { d = d? new Date(d) : null;
				var xhtmlized = null;
				if(!msg || msg.length == 0) return;
				msg = msg.replace(/\n/g,"<br/>");
				msg = msg.replace(/(  {0,36}) /g,'<span style="white-space:pre;">$1</span> ');
				if(msg[0] == '/') {
					var idx =  msg.indexOf(" ");	if(idx == -1) idx = msg.length;
					var cmd =  msg.substr(0,idx);
					var args = msg.substr(idx+1,msg.length-idx-1);
					switch(cmd.toLowerCase()) {
						case "/me":
							xhtmlized = userSPAN(auth)+" "+args;
							break;
						case "/join":
							xhtmlized = jyrcmsg(" + "+auth);
						case "/#join":
							this.notifyUserEntrance(auth);
							break;
						case "/part":
							xhtmlized = jyrcmsg(" - "+auth);
						case "/#part":
							this.notifyUserExit(auth);
							break;
						case "/nick":
							xhtmlized = jyrcmsg(" "+auth+" -> "+args);
							break;
						case "/topic":
						case "/#topic":
							this.notifyTopicChange(args);
							break;
						default:
							xhtmlized = jyrcmsg("unknown command ["+msg+"] from '"+auth+"'");
							break;
					}
				} else	xhtmlized = auth? authSPAN(auth)+msg : jyrcmsg(msg);
				if(!texter)
					texter = document.getElementById("texter");
				else if(texter.innerHTML.length >= 28*1024)
					texter.innerHTML = "";
				if(xhtmlized && texter) {
					texter.innerHTML += msgDIV( (d? dateSPAN(d) : "") + xhtmlized );
					texter.scrollTop = texter.scrollHeight - texter.clientHeight;
				}
			}
			function msgDIV(html)	{ return '<div class="msg">'+html+'</div>'; }
			function jyrcmsg(str)	{ return '<span class="intern-msg">'+str+'</span>'; }
			function dateSPAN(d)	{
				var h=d.getHours(), m=d.getMinutes();
				h = (h<10?'0':'') + h; m = (m<10?'0':'') + m;
				return '<span class="date">'+h+':'+m+'</span>';
			}
			function authSPAN(auth)	{ return '<span class="auth">'+userSPAN(auth)+'</span>'; }
			function userSPAN(user)	{ return '<span class="user">'+user+'</span>'; }

			var userDIVbg = '<div class="user">', userDIVend = '</div>';
			client.notifyUserEntrance = function(user) {
				var regex = new RegExp(userDIVbg + user + userDIVend);
				if(!lister)
					lister = document.getElementById("lister");
				if(lister && !regex.test(lister.innerHTML))
					lister.innerHTML += userDIVbg + user + userDIVend;
			}
			client.notifyUserExit = function(user) { if(!lister) return;
				var regex = new RegExp(userDIVbg + user + userDIVend, 'g');
				lister.innerHTML = lister.innerHTML.replace(regex,'');
			}
			client.clearUserList = function() { if(!lister) return;
				lister.innerHTML = "";
			}

			function onresize() {
				if(!texter) return; // the page is not fully loaded
				texter.innerHTML = ""; // prevent a scroller bug
				client.refreshUserList(); // idem
			}
			function onunload() {
				if(client && client.isDaemonized)
					try { client.post("/quit JyRC client closed");
					} catch(e) {}
			}
		//--></script>
		
		<style type="text/css"><!--
			html,body { height:100%; margin:0; padding:0; cursor:default; }
			#jyrc { display:none; }
			#topicer { text-align:center; font-style:italic; }
			#texter {
				height:100%; overflow:scroll;
				border:1px inset black; padding:1px;
				background-color:#fafafa;
			}
			#lister {
				height:100%; float:right; width:9em; overflow:scroll;
				border:1px solid #afafaf; padding:1px; margin-left:2px; 
				text-align:center;
			}
			#inputter { text-align:center; }

			div.msg {}
			div.msg > .date { color:#555; }
			div.msg > .date:before { content:"["; }
			div.msg > .date:after { content:"] "; }
			div.msg > .auth { font-weight:bold; }
			div.msg > .auth:after { content:"> "; }
			span.user { text-decoration:underline; }
			span.intern-msg { font-style:italic; color:#777; }

			#lister div.user {}
			#lister div.user:hover { background-color:#ccc; }

			#inputter input[name="msg"] { width:100%; border:0; background-color:#ccc; }
			#inputter input[type="submit"] { display:none; }
		--></style>

	</head>
	<body>
		<table id="jyrc" style="height:100%; width:100%; overflow:hidden;">
			<tr><td>
				<div id="topicer">/* JyRC */</div>
			</td></tr>
			<tr><td style="height:100%;">
				<div id="lister"> </div>
				<div id="texter"></div>
			</td></tr>
			<tr><td>
				<form id="inputter" action="" onsubmit="client.post(msg.value); msg.value=''; return false;">
					<input name="msg"/>
					<input type="submit"/>
				</form>
			</td></tr>
		</table>
		<p id="js-err">I'm NOT able to run with your browser (I need DHTML and AJAX).</p>
		<script type="text/javascript"><!--
			if(client.canRun()) {
				document.getElementById("js-err").style.display = "none";
				document.getElementById("jyrc").style.display = "table";
				client.daemonize();
			}
		//--></script>
	</body>
</html>
